<style lang="scss" scoped>
    @import '../../css/study-plan.scss';
    .head-tab-box{
        padding-bottom:36px;
        background: #fff;
        display: flex;
        justify-content: space-between;
    }

    .head-tab-box .department-Tip{
        width:258px;
        height:40px;
        background:rgba(229,247,255,1);
        border-radius:4px;
        border:1px solid rgba(142,212,255,1);
        display: flex;
        align-items: center;
        color:#666A80
    }

    .head-tab-box .department-Tip > i {
        color:#008DFF;
        font-size:14px;
        margin:0 6px 0 10px;

    }

    .word-btn{
        color: $mco;
        padding-right:16px;
        cursor: pointer;
    }
    .no-resource{background: #fff;min-height: 500px;text-align: center;padding-top: 160px;}
    .no-word{color: #999;padding: 20px 0 26px;}
    .base-set-box {
        padding: 30px 30px;
        background: #fff;
    }
    .tag-title{
        width: 100%;
        background-color:#fff
    }

    .tag-title span:nth-of-type(1){margin-left: 0;}
    .tag-title span{color:$mc2;font-size: 16px;padding: 4px 0px;text-align: center;margin-left: 40px;float: left;cursor: pointer;display: inline-block;vertical-align: middle;}
    .tag-title .active{color: $mco;border-bottom:3px solid #3F66F6;}

    .tag-edit-box{border:1px  solid $mcbd;padding: 16px;background: #fff;min-height: 150px;}
    .tag-edit-rules{color:$mc3;font-size: 12px;margin-top: 10px;}

    .tag-list li:nth-of-type(1){margin-left: 0;}
    .tag-list li{float: left;padding: 0 14px;font-size: 14px;color: $mc2;text-align: center;line-height: 42px;box-sizing: border-box;border:1px  solid $mcbd;margin-right: 10px;margin-top: 10px;}

    .el-table td, .el-table th{
        border: 1px solid #ebeef5;
    }

    .departmentCont {
        width:100%;
        height:270px;
        padding:24px 0 0 24px;
        border-radius:2px;
        border:1px solid rgba(225,231,235,1);
        overflow-y: auto;
        box-sizing:border-box;
    }

    .departmentCont-Tip {
        width:100%;
        height:40px;
        background:rgba(229,247,255,1);
        border-radius:4px;
        border:1px solid rgba(142,212,255,1);
        display: flex;
        align-items: center;
        color:#666A80;
        margin-bottom:10px;
    }


    .departmentCont-Tip > i {
        color:#008DFF;
        font-size:14px;
        margin:0 6px 0 10px;

    }
</style>
<template>
    <section>
        <div class="base-set-box">
            <section class="tag-title clearfix">
                <span v-for="(item,$index) in tabList" :key="$index" :class="{'active': tabIndex ==$index}" @click="tabActive($index)">{{item}}</span>
            </section>

            <div class="head-tab-box">
                <div class="department-Tip"><i class="icon iconfont"></i>员工分配部门后启用</div>
                <div>
                    <el-button  @click="deleteFn">批量删除</el-button>
                    <el-button type="primary" @click="layMinistry">分配部门</el-button>
                </div>

            </div>

            <div>
                <el-table :data="list" style="width: 100%" class="newTab" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" property="Eiid" width="82.5" > </el-table-column>
                    <el-table-column prop="Department" label="原有部门" min-width="30%"></el-table-column>
                    <el-table-column prop="MemberName" label="姓名" min-width="30%"></el-table-column>
                    <el-table-column prop="Mobile" label="手机" min-width="30%"></el-table-column>
                </el-table>

                <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage" ></pageModel>

            </div>
        </div>

        <el-dialog
            title="选择部门"
            :visible.sync="departmentState"
            width="30%"
            center>
            <div class="departmentCont-Tip"><i class="icon iconfont"></i>将 “{{name}}” 等{{selectIdAll.length}}位用户分配到</div>
            <div class="departmentCont">
                <el-tree
                    :data="departmentSelectList"
                    :props="props"
                    node-key="DepartmentID"
                    default-expand-all
                    :highlight-current="true"
                    @node-click="handleNodeClick">
                </el-tree>
            </div>


            <span slot="footer" class="dialog-footer">
                <el-button @click="departmentState = false">取 消</el-button>
                <el-button type="primary" @click="configBtn">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 弹窗区 -->
        <el-dialog
            title="提示"
            :visible.sync="deleteState"
            class="new-dialog"
            width="480px"
            :before-close="handleClose">
            <div class="cont">是否确定删除员工？</div>
            <span slot="footer" class="dialog-footer">
                <el-button type="text no-border" @click="deleteState = false">取消</el-button>
                <el-button type="primary"  class="add" @click="delMember(selectIdAll.join(','))">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script>

import qs from 'qs'
import pageModel from "components/pageModel.vue"

export default{
    data: function(){
        return {
            list:[],
            pageSize: 10,
            total:0,
            page:1,
            props: {
                label: 'DepartmentName',
                children: 'Child'
            },
            selectIdAll:[],
            departmentState:false,
            DepartmentID:'',
            tabIndex:1,
            deleteState:false,
            path: [
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'未分配员工'
                }
            ],

            tab:[
                {
                    name: '员工管理',
                    type: '1'
                },
                {
                    name: '未分配员工',
                    type: '2'
                }
            ]
        }
    },
    mixins: [mixinMethods],
    components:{
        pageModel
    },
    watch:{
        creentTab(value){
            value == 1 && this.$router.push({path:'/organization/member-list'})
        }
    },

    computed: {
        creentTab(){
            return this.$store.state.creentTab
        }
    },

    methods: {
        // 当前显示条数发生改变
        getPageSize(value) {
            this.pageSize = value
            this.getList()
        },

        // 当前分页改变
        getPage(value) {
            this.page = value
            this.getList()
        },

        getList(){
            axios.post('/com/employee/unallocatedEmployeeList', qs.stringify({
                pagesize:this.pageSize,
                page:this.page
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Rows
                    this.total=Number(d.data.Total)
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        handleSelectionChange(val) {
            if(!!val && val.length > 0) {
                this.selectIdAll = val.map((v)=>{
                    return v.Eiid
                })

                this.name = val[0].MemberName
            } else {
                this.selectIdAll  = []
            }

        },

        layMinistry() {
            if( this.selectIdAll.length <= 0) {
                this.$message.error('请至少选择一个员工！')
                return false
            }
            this.departmentState = true

        },

        getDepartmentList() {
            axios.post('/com/department/getDepartmentTree').then( (res) => {
                var d = res.data
                if(d.flag == 1){
                    this.departmentSelectList = d.data.Row
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        handleNodeClick(value) {
            this.DepartmentID = value.DepartmentID
        },

        configBtn() {
            if( this.DepartmentID == '') {
                this.$message.error('请选择部门！')
                return false;
            }

            axios.post('/com/employee/allocateEmployee', qs.stringify({
                Eiids: this.selectIdAll.join(','),
                departmentID:this.DepartmentID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$message({
                      message: '分配成功',
                      type: 'success'
                    })

                    this.getList()
                    this.departmentState = false
                    this.pageInfo.page = 1
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        deleteFn(){
            if( this.selectIdAll.length <= 0) {
                this.$message.error('请至少选择一个员工！')
                return false
            } else {
                this.deleteState = true
            }
        },

        // 删除员工
        delMember(EID){
            axios.post('/com/employee/importLogBatchDel', qs.stringify({
                ids:EID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.getList()
                    this.$message.success('删除成功')
                    this.deleteState = false
                }else {
                    this.$message.error(d.msg)
                }
            })
        }

    },
    mounted(){
        // 设置tab切换
        this.$store.commit('setTab', this.tab)
        this.$store.commit('setPath', this.path)
        // 设置面包屑
        this.$store.commit('setTabCur', 2)

        this.getList()
        this.getDepartmentList()
    }
}


</script>
